<template>
  <div class="kucun-setting wap">
    <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}"><span>库存设置</span></x-header>
    <div class="good-tip"><span>[{{brandName}}] {{name}} ({{spec}})</span></div>
    <div class="main">
      <div class="display-flex item">
        <div>
          <span class="kuncun-lable">库存:</span><span class="red-tip">*</span>
        </div>

        <div class="content flex-1">
          <div class="unit-small display-flex align-items-center" v-for="(item,index) in list" :key="item.id">
            <div class="vux-1px-b flex-1">
              <input maxlength="11" type="number" class="normal-input unit-input" v-model="item['unitStock']"/>
            </div>
            <span class="sell-credit-lable">{{item.name}}</span>
          </div>


        </div>

      </div>

      <div class="checkBox">

        <div class="iconBox">
          <check-icon :value.sync="isCheck">零库存可销售</check-icon>
        </div>


      </div>

      <div class="btn-comfirm display-flex justify-content-flex-center align-items-center" v-btn-control @click="submitData($event)">确认
      </div>
    </div>

  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        list: [],
        name: "",
        brandName: '',
        spec: '',
        isCheck: false
      }
    },
    mounted() {
      this.name = decodeURIComponent(this.$route.query.name).toString().replace(/~~pct~~/g, '%');
      this.brandName = decodeURIComponent(this.$route.query.brandName).toString().replace(/~~pct~~/g, '%');
      this.spec = decodeURIComponent(this.$route.query.spec).toString().replace(/~~pct~~/g, '%');

      this.isCheck= this.$route.query.flag==0;
      this.initData();
    },
    methods: {
      initData() {

        let stock=this.$route.query.stock<0?0:this.$route.query.stock;
        let rate=this.$route.query.rate;
        console.log(stock,stock%rate)
        this.$ajax.get("goods/unit/list", (res) => {
          console.log("====res", res);
          if (res.code == 200) {
            for(let i=0;i<res.data.length;i++){
              if(res.data[i].isBaseUnit==1){
                console.log(1)
                res.data[i].unitStock=rate==1?stock:stock%rate
              }else{
                console.log(2)
                res.data[i].unitStock=(stock-(stock%rate))/rate
              }

            }
            this.list = res.data;
            console.log(this.list)

          } else {
            this.$vux.toast.text(res.msg, 'center');
          }
        }, {goodsId: this.$route.query.goodsId})
      },
      submitData(event) {
        let arr = [];
        let  stock=0;
        for (let i = 0; i < this.list.length; i++) {
          let obj = {
            "goodsId": this.$route.query.goodsId,
            "unitId": this.list[i].id,
            "unitStock": this.list[i].unitStock||0,
            "zeroSaleFlag":this.isCheck?0:1,
          };
          if(this.list[i].isBaseUnit==0){
              stock+=parseInt(this.list[i].unitStock*this.list[i].rate);
          }else if(this.list[i].isBaseUnit==1){
            stock+=parseInt(this.list[i].unitStock);
          }
          if (!this.isCheck&&obj.unitStock!=0&&(obj.unitStock == undefined || obj.unitStock == null || obj.unitStock == '')) {
            this.$vux.toast.text("请完善库存信息", 'center');
            return;
          } else if (!this.isCheck&&(!this.$checkIsNumberContainZoro(obj.unitStock))) {
            this.$vux.toast.text("请输入正整数", 'center');
            return;
          } else {
            arr.push(obj);
          }
        }

        if(event.target.disabled){
          return;
        }
        this.$ajax.post("goods/set/stock", arr, (res) => {
          if (res.code == 200) {

            if (this.$fromApp(this)) {
              this.$callJava({code: 1017,"stock":stock,"goodsId": this.$route.query.goodsId})
            } else {
              this.$router.go(-1)
            }
          } else {
            this.$vux.toast.text(res.msg, 'center');
          }
        }, 1)

      },
      oninput(e) {
        // 通过正则过滤小数点后两位
        console.log("====", e.target.value);
        if (e.target.value.match(/(^[\+\-])?\d{1,8}/)) {
          e.target.value = (e.target.value.match(/(^[\+\-])?\d{1,8}/)[0]);
        } else {
          e.target.value = null
        }

      }
    },

  }
</script>

<style lang="less" type="text/less" scoped>
  .kucun-setting {
    background: #fff;
    .good-tip {
      padding: .2rem;
      font-size: .32rem;
      background: #f7f7f7;
      color: #666;
      font-weight: bold;
    }
    .unit-input {
      font-size: .32rem;
      padding-left: .1rem;
    }
    .red-tip {
      color: red;
      vertical-align: middle;
    }
    .item {
      margin: 1.19rem 1rem 1.2rem 1rem;

      .kuncun-lable {
        font-size: .32rem;
        color: #333;
        padding-right: .2rem;
        font-weight: bold;
        white-space: nowrap;
      }
      /deep/ .weui-cells {
        margin-top: 0;
      }
      /deep/ .weui-cells:before, /deep/ .weui-cells:after {
        border: none;
      }
      .unit-small {
        margin-bottom: .2rem;
        margin-right: .2rem;
      }

    }
    .btn-comfirm {
      text-align: center;
      height: .92rem;
      background: #527DD9;
      border-radius: .46rem;
      color: #fff;
      font-size: .34rem;
      margin: 0 .3rem .3rem .3rem;
    }
  }

  .checkBox {

    text-align: center;
    margin-bottom: .4rem;
    /deep/ .weui-icon-circle {
      width: 18px;
      height: 15px;
      color: #F5F5F5;
      background: #F5F5F5;
      border: 1px solid #BBBBBB;
      border-radius: 3px;
      -moz-border-radius: 3px;
      font-size: 12px;
      padding-top: 3px;
      &:before {
        content: "\EA08";
      }
    }
    /deep/ .vux-check-icon > span {
      color: #666666;
      margin-left: 3px;
      position: relative;
      top: 1px;
    }
    /deep/ .weui-icon-success {
      width: 18px;
      height: 15px;
      background: #4AC1A1;
      border: 1px solid #4AC1A1;
      border-radius: 3px;
      -moz-border-radius: 3px;
      font-size: 12px;
      padding-top: 3px;
      &:before {
        content: "\EA08";
        color: #FFFFFF;
      }
    }

  }


</style>
